<template>
  <div>
    <el-row :gutter="10"
            class="mb8">
      <el-col :span="1.5">
        <el-button type="primary"
                   plain
                   icon="el-icon-plus"
                   @click="addDum()"
                   size="mini">新增</el-button>
      </el-col>
    </el-row>

    <div class="detail">
      <el-table border
                :data="tableDatadum"
                style="width: 100%"
                :key="numkey">
        <el-table-column align="center"
                         label="选择文件">
          <template slot-scope="scope">
            <div @click="handlechoose(scope.$index,scope)">
              <el-upload ref="uploadComp"
                         action=""
                         :id="'uploadComp' + scope.$index"
                         :limit="1"
                         :on-change="handleChange"
                         :auto-upload="false"
                         :show-file-list="false">
                <span v-if="scope.row.showInput">
                  <pre>{{scope.$index}}</pre>

                  选择文件
                </span>
              </el-upload>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="name"
                         label="名称"></el-table-column>
        <el-table-column align="center"
                         prop="version"
                         label="版本"></el-table-column>
        <el-table-column align="center"
                         prop="path"
                         label="查看"></el-table-column>
        <el-table-column align="center"
                         label="操作">
          <template slot-scope="scope">
            <div class="operate-groups">
              <el-button class="bcbtn"
                         size="mini"
                         type="text"
                         icon="el-icon-circle-check"
                         v-if="scope.row.showInput"
                         @click="handleSave1(scope.$index,scope.row)">保存</el-button>
              <el-button size="mini"
                         type="text"
                         icon="el-icon-delete"
                         v-if="!scope.row.showInput"
                         @click="handleDelete(scope.$index, scope.row)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
 
<script>
import { default as apiList } from '../../apis/moxing';
export default {
    name: 'dum',
    components: {},
    data() {
        return {
            numkey: 0,
            tableDatadum: [],
            id: 0,
            curRowIndex: 0,
        };
    },
    created() {
        this.chaxunnum();
    },
    methods: {
        ...apiList,

        chaxunnum() {
            this.searchnumjy({ busiId: this.$route.query.id, sort: 1 }).then(res => {
                console.log(res, '11111111111111111');
                localStorage.setItem('dumlist', JSON.stringify(res.data));

                res.data.forEach((item, index) => {
                    item.flag = true;
                });
                this.tableDatadum = res.data;
            });
        },
        handlechoose(num) {
            this.curRowIndex = num;
            console.log(num);
            this.tableDatadum[num].flag = false;
        },

        /* 返回 */
        goOff() {
            this.$router.go(-1);
        },

        // 新增
        addDum() {
            this.tableDatadum.push({
                id: this.id++,
                flag: true,
                showInput: true,
            });
            console.log(this.tableDatadum);
        },

        // 删除
        handleDelete($index, row) {
            console.log(row.pkId, 'rowrow');
            var w = [];
            w.push(row.pkId);
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.deletedum(w)
                    .then(res => {
                        this.tableDatadum.splice($index, 1); // 页面删除
                        this.$message({
                            type: 'success',
                            message: '删除成功!',
                        });
                    })
                    .catch(err => {
                        this.$message({
                            type: 'error',
                            message: '操作取消',
                        });
                    });
            });
        },

        /* 保存 */
        handleSave1($index, row) {
            row.showInput = false;
            console.log($index);
            // console.log(this.tableDatadum, 'this.tableDatadum');
            // localStorage.setItem('dumlist', JSON.stringify(this.tableDatadum));
            this.addnumjy({
                busiId: this.$route.query.id,
                name: row.name,
                path: row.path,
                uploadType: 2,
                sort: 1,
                showInput: row.showInput,
                version: row.version,
            }).then(res => {
                this.$message({
                    type: 'success',
                    message: '保存成功!',
                });
                // console.log(res, 'resresres');

                this.tableDatadum[$index].flag = false;
                this.chaxunnum();
            });
        },

        // 选择文件
        handleChange(file, fileLists) {
            this.$refs.uploadComp.clearFiles();

            let fileName = file.name.substring(0, file.name.indexOf('.'));
            //      console.log(fileName, 'fileName去掉文件后缀名')
            let fileDivision = fileName.split('-');
            //   console.log(fileDivision, '分割')
            let fileDivisionName = fileDivision[0];
            let fileDivisionversions = fileDivision[1];
            //   console.log(fileDivisionName, '名称')
            // console.log(fileDivisionversions, '版本')
            let inputName = 'uploadComp' + this.curRowIndex;
            console.log(inputName);
            let dumPath = document.getElementById(inputName).getElementsByTagName('input')[0].value;
            console.log(dumPath, 'dumPath');
            this.tableDatadum[this.curRowIndex] = {
                name: fileDivisionName,
                version: fileDivisionversions,
                path: dumPath,
                showInput: true,
                id: this.curRowIndex,
            };
            this.numkey++;
        },

        getFileName(data) {
            return;
        },
    },
};
</script>
 
<style lang="scss" scoped>
.detail {
    padding: 15px;
    background-color: #1b232e;
}
.mb8 {
    padding-bottom: 5px;
}
.hidden-columns {
    background-color: #212a39;
}
::v-deep.el-table__header-wrapper {
    background-color: #1b232e;
}
</style>